import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Bundle from './bundle';
// const AsyncDemo = Bundle(() => import(/*webpackChunkName:"test"*/'@/pages/test.js'))

// component
import Home from '@/pages/home';
const Login = Bundle(() => import(/*webpackChunkName:"Login"*/'@/pages/login'));
const NotFound = Bundle(() => import(/*webpackChunkName:"NotFound"*/'@/pages/error/404'));
const Register = Bundle(() => import(/*webpackChunkName:"Register"*/'@/pages/register'));
const Dashboard = Bundle(() => import(/*webpackChunkName:"Dashboard"*/'@/pages/dashboard'));
const Niu = Bundle(() => import(/*webpackChunkName:"Niu"*/'@/pages/dashboard/niu'));
const Boss = Bundle(() => import(/*webpackChunkName:"Boss"*/'@/pages/dashboard/boss'));
const FinishedInfo = Bundle(() => import(/*webpackChunkName:"FinishedInfo"*/'@/pages/dashboard/finishinfo'));
const Me = Bundle(() => import(/*webpackChunkName:"Me"*/'@/pages/dashboard/me'));
const Msg = Bundle(() => import(/*webpackChunkName:"Msg"*/'@/pages/dashboard/msg'));
const Chat = Bundle(() => import(/*webpackChunkName:"Chat"*/'@/business/chat'));

const Router = (props) => {
    return (
        <div>
            <Switch>
                {/*App.js相当于路由根组件*/}
                {/*home*/}
                <Route exact path="/" component={Home} />
                {/*login*/}
                <Route path="/login" component={Login} />
                {/*register*/}
                <Route path="/register" component={Register} />
                {/*dashboard*/}
                <Route path="/dashboard" render={({match, history, location})=>{
                    return (
                        /*嵌套中建议把每个功能模块的根拆出来作为标签，用this.props.children 标签里面放路由即可*/
                        <Dashboard match={match} history={history} location={location}>
                            {/*权限内部做，如果没权限直接去登录*/}
                            <Switch>
                                {/*默认*/}
                                <Route path={`${match.path}(/)`} render={()=>{
                                    return null;
                                }} />
                                {/*牛人看Boss列表*/}
                                <Route path={`${match.path}/niu`} component={Boss} />
                                {/*boss看牛人列表*/}
                                <Route path={`${match.path}/boss`} component={Niu} />
                                {/*牛人和boss的完善信息*/}
                                <Route path={`${match.path}/finishedInfo`} component={FinishedInfo} />
                                {/*个人中心*/}
                                <Route path={`${match.path}/me`} component={Me} />
                                {/*消息列表*/}
                                <Route path={`${match.path}/msg`} component={Msg} />
                                {/*聊天*/}
                                <Route path={`${match.path}/chat/:tid`} component={Chat} />
                                {/*404*/}
                                <Route component={NotFound} />
                            </Switch>
                            {/*路由这里搞*/}
                        </Dashboard>
                    )
                }} />
                {/*404*/}
                <Route component={NotFound} />
            </Switch>
        </div>
    )
};

export { Router };